<template>
  <div class="script-formatter">
    <div class="formatter-header">
      <h2>剧本格式化</h2>
      <div class="formatter-actions">
        <el-button @click="formatScript">格式化</el-button>
        <el-button type="primary" @click="exportScript">导出</el-button>
      </div>
    </div>
    
    <div class="formatter-content">
      <div class="format-options">
        <el-form :model="formatOptions" label-width="100px">
          <el-form-item label="格式类型">
            <el-select v-model="formatOptions.type" placeholder="选择格式类型">
              <el-option label="标准剧本" value="standard" />
              <el-option label="分镜剧本" value="storyboard" />
              <el-option label="小说格式" value="novel" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="字体">
            <el-select v-model="formatOptions.font" placeholder="选择字体">
              <el-option label="宋体" value="SimSun" />
              <el-option label="黑体" value="SimHei" />
              <el-option label="微软雅黑" value="Microsoft YaHei" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="字号">
            <el-select v-model="formatOptions.fontSize" placeholder="选择字号">
              <el-option label="小四" value="12pt" />
              <el-option label="四号" value="14pt" />
              <el-option label="三号" value="16pt" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="行距">
            <el-select v-model="formatOptions.lineHeight" placeholder="选择行距">
              <el-option label="1.5倍" value="1.5" />
              <el-option label="2倍" value="2" />
              <el-option label="2.5倍" value="2.5" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      
      <div class="script-preview">
        <div class="preview-header">
          <h3>预览</h3>
        </div>
        <div class="preview-content" :style="previewStyle">
          <div v-if="formattedScript" class="formatted-script">
            {{ formattedScript }}
          </div>
          <div v-else class="preview-placeholder">
            点击"格式化"按钮开始预览
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const formatOptions = ref({
  type: 'standard',
  font: 'SimSun',
  fontSize: '12pt',
  lineHeight: '1.5'
})

const formattedScript = ref('')

const previewStyle = computed(() => ({
  fontFamily: formatOptions.value.font,
  fontSize: formatOptions.value.fontSize,
  lineHeight: formatOptions.value.lineHeight
}))

const formatScript = () => {
  // 模拟格式化
  formattedScript.value = '场景：室内\n\n' +
    '人物：张三\n\n' +
    '时间：白天\n\n' +
    '张三：（走进房间）今天天气真不错！\n\n' +
    '李四：（抬头）是啊，阳光明媚。'
  
  ElMessage.success('格式化完成')
}

const exportScript = () => {
  if (!formattedScript.value) {
    ElMessage.warning('请先格式化剧本')
    return
  }
  // 模拟导出
  ElMessage.success('导出成功')
}
</script>

<style scoped>
.script-formatter {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.formatter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
}

.formatter-content {
  flex: 1;
  display: flex;
  gap: 24px;
}

.format-options {
  width: 300px;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}

.script-preview {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.preview-header {
  margin-bottom: 16px;
}

.preview-content {
  flex: 1;
  background: #f5f7fa;
  border-radius: 4px;
  padding: 24px;
  overflow-y: auto;
  white-space: pre-wrap;
}
</style> 